<template>
	<div id="result">
		<!-- 顶部标题 -->
		<div id="title-wrap">
			<!-- 把输入值渲染到这里 -->
			<span class="sp">{{$route.query.q}}</span>
			<span>共搜到{{searchCount}}个结果</span>
		</div>
		<el-tabs v-model="activeName">
			<el-tab-pane label="歌曲" name="first">
				<table class="table">
					<thead>
						<tr>
							<th></th>
							<th>音乐标题</th>
							<th>歌手</th>
							<th>专辑</th>
							<th>时长</th>
						</tr>

					</thead>
					<tbody>
						<tr v-for="(item,index) in songList" :key="index">
							<td>{{(index+1)}}</td>
							<td>
								<span>{{item.name}}</span>
							</td>
							<td>{{item.artists[0].name}}</td>
							<td>
								<span>{{item.album.name}}</span>
							</td>
							<td>{{item.duration}}</td>
							<td><img src="../../assets/img/bf.png" @click="playMusic(item.id)"></td>
						</tr>
					</tbody>

				</table>
			</el-tab-pane>
			<el-tab-pane label="歌名" name="second">
				<div id="recommend">
					<div class="item" v-for="(item,index) in songList" :key="index">
						<div class="img-wrap">
							<img :src="item.coverImgUrl">
							<p class="name">{{item.name}}</p>
						</div>

					</div>
				</div>
			</el-tab-pane>
			
		</el-tabs>
		<el-pagination background layout="prev, pager, next" :total="100" class="el">
		</el-pagination>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: 'Result',
		/* 
		 生命周期钩子  created
		 回调函数  添加之后自动执行
		 内部可以通过this访问到vue实例
		 
		 */
		//侦听器
		
		created() {
			axios({
				url: 'https://autumnfish.cn/search',
				method: 'get',
				params: {
					keywords: this.$route.query.q,
					type: '1',
					limit: 20
				}
			}).then(res => {
				this.songList = res.data.result.songs
				//计算歌曲时间
				for (let i = 0; i < this.songList.length; i++) {
					let min = parseInt(this.songList[i].duration / 1000 / 60)
					let sec = parseInt(this.songList[i].duration / 1000 % 60)
					if (min < 10) {
						min = '0' + min
					}
					if (sec < 10) {
						sec = '0' + sec
					}
					this.songList[i].duration = min + ":" + sec
				}
				//保存搜索总数
				this.searchCount = res.data.result.songCount
			})
		},
		data() {
			return {
				activeName: 'first',
				songList: [], //存放歌曲列表
				//搜索结果的总数
				searchCount: 0
			};
		},
		methods: {
			playMusic(id) {
				axios({
					url: 'https://autumnfish.cn/song/url',
					method: 'get',
					params: {
						id
					}
				}).then(res => {
					let url = res.data.data[0].url
					//设置父组件的播放地址
					this.$parent.musicUrl = url
				})

			}
		}
	}
</script>

<style scoped="scoped">
	.el{
		text-align: center;
	}
	#recommend .img-wrap p{
		padding-left: 10px;
	}
	.table thead tr th {
		padding-left: 70px;
		color: #999999;
	}

	.table tbody tr td {
		padding-left: 70px;
		padding-top: 10px;
	}

	.table tbody tr td span {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		width: 30px;
	}

	.table tbody tr td img {
		width: 50px;
		height: 50px;
	}

	#title-wrap .sp {
		color: #000000;
		font-size: 20px;
		font-weight: 600;
		padding-right: 40px;
	}
</style>
